import React from 'react';
import { Button, Typography } from '@douyinfe/semi-ui';
import { Icon } from '@iconify/react';

const { Title, Text } = Typography;

interface EmptyStateProps {
  title?: string;
  description?: string;
  image?: React.ReactNode;
  showAction?: boolean;
  actionText?: string;
  onAction?: () => void;
  className?: string;
}

export const EmptyState: React.FC<EmptyStateProps> = ({
  title = '暂无数据',
  description = '当前没有可显示的内容',
  image,
  showAction = false,
  actionText = '创建新的',
  onAction,
  className = '',
}) => {
  const defaultImage = (
    <svg
      width="100"
      height="100"
      viewBox="0 0 100 100"
      fill="none"
      xmlns="http://www.w3.org/2000/svg"
      className="mx-auto"
    >
      <rect
        x="15"
        y="25"
        width="70"
        height="50"
        rx="4"
        fill="var(--semi-color-fill-1)"
        stroke="var(--semi-color-border)"
      />
      <circle cx="30" cy="40" r="6" fill="var(--semi-color-fill-2)" />
      <path
        d="M45 55L60 40L70 50"
        stroke="var(--semi-color-border)"
        strokeWidth="2"
        fill="none"
      />
      <rect
        x="20"
        y="60"
        width="15"
        height="2"
        fill="var(--semi-color-fill-2)"
      />
      <rect
        x="20"
        y="65"
        width="25"
        height="2"
        fill="var(--semi-color-fill-2)"
      />
    </svg>
  );

  return (
    <div
      className={`flex min-h-[300px] flex-col items-center justify-center p-8 ${className}`}
    >
      <div className="text-center">
        <div className="mb-4">{image || defaultImage}</div>

        <Title
          heading={4}
          style={{ color: 'var(--semi-color-text-1)', marginBottom: 8 }}
        >
          {title}
        </Title>

        <Text
          type="secondary"
          style={{ fontSize: 14, marginBottom: 24, display: 'block' }}
        >
          {description}
        </Text>

        {showAction && onAction && (
          <Button
            theme="solid"
            type="primary"
            icon={<Icon icon="lucide:plus"></Icon>}
            onClick={onAction}
          >
            {actionText}
          </Button>
        )}
      </div>
    </div>
  );
};
